<template>
    <div :class="class" style="width:100%;height:100%;position: relative;">
        <slot></slot>
        <Transition name="fade">
            <Loading class="loading" v-if="currentLoading" />
        </Transition>
    </div>
    
</template>
<script lang='ts' setup>
import {ref, watch} from "vue"
import Loading from "@/components/Loading/index.vue"

interface WithWaitProps {
    loading: boolean // true 开始加载 false结束加载
    class?: string
}

let currentLoading  = ref<boolean>(true)
const props = defineProps<WithWaitProps>()

watch(()=>props.loading,(n,o)=>{
    currentLoading.value = n
},{
    immediate:true
})



</script>
<style scoped>
.loading {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--background);
}
/**进入动画中 */
.fade-enter-active {
    opacity: 1;
    z-index: 9999;
}

/**离开动画前 */
.fade-leave-from {
   opacity: 1;
}
/**离开动画中 */
.fade-leave-active {
    opacity: 0;
    transition: all 1s ease;
}

</style>